<template>
  <div>
    <p>{{ person }}</p>
    <button @click="changeAge">改变年龄</button>
    <button @click="changeFriHobby">修改朋友的爱好</button>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
// reactive函数只支持对象/数组复杂的数据
const person = reactive({
  name: '张三',
  age: 18,
  friend: {
    name: '李四',
    hobby: ['钓鱼', '摄影']
  }
})

const changeAge = () => {
  person.age++
}

const changeFriHobby = () => {
  person.friend.hobby.push(Date.now().toString())
}
</script>